<template>
     <!--团课排课表格顶栏图标-->
     <div class="mb-4">
    <el-button type="primary">新增排课</el-button>
    <el-button type="primary">刷新课程表</el-button>
    </div>
    <!--团课排课表格顶栏图标##-->
    <hr>

    <!--团课表格-->
    <el-calendar ref="calendar">
    <template #header="{ date }">
      <span>排课课表</span>
      <span>{{ date }}</span>
      <el-button-group>
        <el-button size="small" @click="selectDate('prev-year')">
          <<
        </el-button>
        <el-button size="small" @click="selectDate('prev-month')">
            <
        </el-button>
        <el-button size="small" @click="selectDate('today')">今天</el-button>
        <el-button size="small" @click="selectDate('next-month')">
          >
        </el-button>
        
        <el-button size="small" @click="selectDate('next-year')">
          >>
        </el-button>
      </el-button-group>
    </template>
  </el-calendar>
    <!--团课表格##-->

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { CalendarDateType, CalendarInstance } from 'element-plus'



const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}
</script>

<style scoped>

/*团课表格样式*/
.is-selected {
  color: #1989fa;
}
/*团课表格样式##*/

</style>